import { View } from '@tarojs/components';
import dayjs from 'dayjs';
import { AtCountdown } from 'taro-ui';
import './index.scss';

const titles = {
  1: () => '待买家付款',
  2: (orderDetail: any) => {
    const { order_status, payType, serviceType } = orderDetail;
    console.log('serviceType', serviceType);
    // serviceType === 1: 上门 2：到店
    if (orderDetail.serviceType === 1) {
      return orderDetail.orderType === 1
        ? order_status === 201
          ? '待发货' + (payType === 1 ? '(线下付款)' : '')
          : '待收货' + (payType === 1 ? '(线下付款)' : '')
        : '待上门服务' + (payType === 1 ? '(线下付款)' : '');
    } else {
      return orderDetail.orderType === 1
        ? '待到店自提' + (payType === 1 ? '(线下付款)' : '')
        : '待到店服务' + (payType === 1 ? '(线下付款)' : '');
    }
  },
  3: () => '交易已完成',
  4: () => '订单已取消',
  5: () => '退款审核中，等待商家处理',
  6: () => '已退款',
};

const descs = {
  1: ({ time, onTimeUp }) => {
    return (
      <View className="time-desc">
        请于
        <AtCountdown
          format={{ hours: '时', minutes: '分', seconds: '秒' }}
          isShowHour={false}
          seconds={time}
          onTimeUp={onTimeUp}
        />
        内付款，超时订单将自动关闭
      </View>
    );
  },
  2: ({ date, orderType, serviceType, order_status }) => {
    console.log('order_status', order_status);
    let text = '';
    if (orderType === 1) {
      text =
        serviceType === 1
          ? order_status === 201
            ? '待发货，请耐心等待'
            : '配送中，请耐心等待'
          : `请于${date}日上门自提`;
    } else {
      text = serviceType === 1 ? '请耐心等待服务人员上门' : `请于${date}日到店服务`;
    }
    return <View className="time-desc">{text}</View>;
  },
  3: ({ orderType }) => {
    return (
      <View className="time-desc">
        {orderType === 1 ? '感谢您购买商品，期待您再次光临。' : '很荣幸为您服务，期待您再次光临'}
      </View>
    );
  },
  4: () => {
    return <View className="time-desc">订单超时未支付自动取消</View>;
  },
  5: ({ refoundTime }) => {
    return (
      <View className="time-desc">
        {/* 退款申请{dayjs(refoundTime).add(6, 'day').format('YYYY-MM-DD HH:mm:ss')}自动达成并完成退款 */}
        商家将于{dayjs(refoundTime).add(6, 'day').format('YYYY-MM-DD HH:mm:ss')}之前完成审核并退款
      </View>
    );
  },
  6: ({ refoundTime }) => {
    return (
      <View className="time-desc">
        已于{dayjs(refoundTime).format('YYYY-MM-DD HH:mm:ss')}完成退款
      </View>
    );
  },
};

/**
 * 订单时间
 * @param time number 剩余倒计时秒数
 * @returns onTimeUp function 倒计时归零的回调
 */
export default function ({ orderDetail, onTimeUp = () => {} }) {
  console.log('orderDetail', orderDetail);
  const titleText = titles[orderDetail.orderStatus](orderDetail);
  const { time, date, orderType, serviceType, refoundTime, order_status } = orderDetail;

  return (
    <View className="order-time-down section-block">
      <View className="time-title">{titleText}</View>
      {descs[orderDetail.orderStatus]({
        time,
        date,
        order_status,
        onTimeUp,
        orderType,
        serviceType,
        refoundTime,
      })}
    </View>
  );
}
